<template>
    <div class="conponent-input">
        <label :class="{focus:isFocus}">
            <div :style="style"></div>
            <input :type="type" v-model="deplux" :placeholder="placeholder" @focus="focus()" @blur="blur()">
        </label>
    </div>
</template>

<script type="text/babel">
    let ICON = {
        id: '0',
        password: '-16px',
        email: '-32px',
        name: '-48px',
        gruop: '-64px',
        file: '-80px'
    };

    module.exports = {
        data: ()=>({isFocus: false}),
        props: {
            icon: {
                coerce: function (icon) {
                    return icon || ''
                }
            },
            type: {
                coerce: function (type) {
                    return type || 'text'
                }
            },
            deplux: {
                coerce: function (deplux) {
                    return deplux || ''
                }
            },
            placeholder: {
                coerce: function (placeholder) {
                    return placeholder || ''
                }
            },
            link: String
        },
        computed: {
            style: function () {
                return {
                    'background-position': ICON[this.icon] + ' ' + (this.isFocus ? '-16px' : '0')
                }
            }
        },
        methods: {
            focus: function () {
                this.isFocus = true;
            },
            blur: function () {
                this.isFocus = false;
            }
        },
        created: function () {
        }
    }
</script>